<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="服务包名称" prop="packageName">
        <el-input
          v-model="queryParams.packageName"
          placeholder="请输入服务包名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="auditStatus">
        <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态" clearable>
          <el-option
            v-for="dict in pack_audit_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否停用" prop="stop">
        <el-select v-model="queryParams.stop" placeholder="请选择是否停用" clearable>
          <el-option
            v-for="dict in pack_stop"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['package:package:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['package:package:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['package:package:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['package:package:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="packageList" @selection-change="handleSelectionChange"
    @row-click="tiaoXQ">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="服务包编号" align="center" prop="packageId" />
      <el-table-column label="服务包名称" align="center" show-overflow-tooltip prop="packageName" />
      <el-table-column label="服务包类型" align="center" prop="packageType">
        <template #default="scope">
          <dict-tag :options="package_type" :value="scope.row.packageType"/>
        </template>
      </el-table-column>
      <el-table-column label="服务包价格" align="center" prop="price" />
      <el-table-column label="服务对象" show-overflow-tooltip align="center" prop="serviceTarget" />
      <el-table-column label="签约周期" align="center" prop="contractCycle" />
      <el-table-column show-overflow-tooltip  label="服务介绍" align="center" prop="serviceIntroduction" >
        <template #default="scope">
          <span v-html="scope.row.serviceIntroduction"></span>
        </template>
      </el-table-column>
      <el-table-column label="续签状态" align="center" prop="renewalStart">
        <template #default="scope">
          <dict-tag :options="renewal_start" :value="scope.row.renewalStart"/>
        </template>
      </el-table-column>
      <el-table-column label="服务包图片" align="center" prop="packageImage" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.packageImage" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="auditStatus">
        <template #default="scope">
          <dict-tag :options="pack_audit_status" :value="scope.row.auditStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="审核时间" align="center" prop="auditTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否停用" align="center" prop="stop">
        <template #default="scope">
          <dict-tag :options="pack_stop" :value="scope.row.stop"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="130">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['package:package:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['package:package:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改服务包对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="packageRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="服务包名称" prop="packageName">
          <el-input v-model="form.packageName" placeholder="请输入服务包名称" />
        </el-form-item>
        <el-form-item label="类型" prop="packageType">
          <el-select v-model="form.packageType" placeholder="请选择类型">
            <el-option
              v-for="dict in package_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务包价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入服务包价格" />
        </el-form-item>
        <el-form-item label="服务对象" prop="serviceTarget">
          <el-input v-model="form.serviceTarget" placeholder="请输入服务对象" />
        </el-form-item>
        <el-form-item label="签约周期" prop="contractCycle">
          <el-input v-model="form.contractCycle" placeholder="请输入签约周期" />
        </el-form-item>
        <el-form-item label="服务介绍">
          <editor v-model="form.serviceIntroduction" :min-height="192"/>
        </el-form-item>
        <el-form-item label="续签状态" prop="renewalStart">
          <el-radio-group v-model="form.renewalStart">
            <el-radio
              v-for="dict in renewal_start"
              :key="dict.value"
              :label="parseInt(dict.value)"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务包图片" prop="packageImage">
          <image-upload v-model="form.packageImage"/>
        </el-form-item>
        <el-form-item label="审核状态" prop="auditStatus">
          <el-select v-model="form.auditStatus" placeholder="请选择">
            <el-option
              v-for="dict in pack_audit_status"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核时间" prop="auditTime">
          <el-date-picker clearable
            v-model="form.auditTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择审核时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否停用" prop="stop">
          <el-select v-model="form.stop" placeholder="请选择">
            <el-option
              v-for="dict in pack_stop"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <!-- <div class="service-package-management">
    
    <div class="package-list">
      <div class="package-category" v-for="(category, index) in servicePackageCategories" :key="index">
        <h3>{{ category.name }}</h3>
        <div class="package-item" v-for="(packageItem, pkgIndex) in category.packages" :key="pkgIndex">
          <img :src="packageItem.packageImage" alt="服务包图标" class="package-icon" >
          <div class="package-info">
            <h4>{{ packageItem.packageName }}</h4>
            <p>服务对象: {{ packageItem.serviceTarget }}</p>
            <div class="service-list">
              <span v-for="(service, sIndex) in packageItem.services" :key="sIndex" class="service-tag">{{ service }}</span>
            </div>
            <div v-if="packageItem.status === 'pending'" class="status-tag pending">待审核</div>
            <div v-if="packageItem.status === 'inUse'" class="status-tag inUse">使用中</div>
          </div>
        </div>
      </div>
    </div>
  </div> -->

    
</template>

<script setup name="Package">
import { listPackage, getPackage, delPackage, addPackage, updatePackage } from "@/api/package/package";
import axios from "axios";
import { useRouter } from 'vue-router';
const router = useRouter();
const { proxy } = getCurrentInstance();
const { renewal_start, pack_audit_status, pack_stop, package_type } = proxy.useDict('renewal_start', 'pack_audit_status', 'pack_stop', 'package_type');

function tiaoXQ(row) {
  router.push({ path: 'servicedetail', query: { rowData: row.packageId }  });
}

const servicePackageCategories = ref([
  {
    name: '初级包',
    packages: [
      
      // 更多初级包数据...
    ]
  },
  {
    name: '中级包',
    packages: [
      
      // 更多中级包数据...
    ]
  },
  {
    name: '高级包',
    packages: [
      
      // 更多高级包数据...
    ]
  },
  {
    name: '特定级包',
    packages: [
      
      // 更多中级包数据...
    ]
  }
]);


const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const daterangeAuditTime = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    packageName: null,
    auditStatus: null,
    stop: null,
  },
  rules: {
    packageName: [
      { required: true, message: "服务包名称不能为空", trigger: "blur" }
    ],
    price: [
      { required: true, message: "服务包价格不能为空", trigger: "blur" }
    ],
    serviceTarget: [
      { required: true, message: "服务对象不能为空", trigger: "blur" }
    ],
    contractCycle: [
      { required: true, message: "签约周期不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询服务包列表 */
function getList() {
  loading.value = true;
  queryParams.value.params = {};
  chujipackage.value = [];
  zhongjipackage.value = [];
  gaojipackage.value = [];
  tedingpackage.value = [];
  servicePackageCategories.value = []
  if (null != daterangeAuditTime && '' != daterangeAuditTime) {
    queryParams.value.params["beginAuditTime"] = daterangeAuditTime.value[0];
    queryParams.value.params["endAuditTime"] = daterangeAuditTime.value[1];
  }
  listPackage(queryParams.value).then(response => {
    packageList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    getPackage2();
  });
  
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    packageId: null,
    packageName: null,
    packageType: null,
    price: null,
    serviceTarget: null,
    contractCycle: null,
    serviceIntroduction: null,
    renewalStart: null,
    packageImage: null,
    auditStatus: null,
    auditTime: null,
    stop: null,
    del: null
  };
  proxy.resetForm("packageRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  daterangeAuditTime.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.packageId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加服务包";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _packageId = row.packageId || ids.value
  getPackage(_packageId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改服务包";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["packageRef"].validate(valid => {
    if (valid) {
      if (form.value.packageId != null) {
        updatePackage(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addPackage(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _packageIds = row.packageId || ids.value;
  proxy.$modal.confirm('是否确认删除服务包编号为"' + _packageIds + '"的数据项？').then(function() {
    return delPackage(_packageIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('package/package/export', {
    ...queryParams.value
  }, `package_${new Date().getTime()}.xlsx`)
}
const packageList = ref([]);
const chujipackage= ref([]);
const zhongjipackage= ref([]);
const gaojipackage= ref([]);
const tedingpackage= ref([]);
function getPackage2(){
  for (let i = 0; i < packageList.value.length; i++) {
    if (packageList.value[i].packageType == 1) {
      chujipackage.value.push(packageList.value[i]) 
    } else if (packageList.value[i].packageType == 2) {
      zhongjipackage.value.push(packageList.value[i]) 
    } else if (packageList.value[i].packageType == 3) {
      gaojipackage.value.push(packageList.value[i]) 
    }
    else if (packageList.value[i].packageType == 4) {
      tedingpackage.value.push(packageList.value[i])
    }
  }
  servicePackageCategories.value = [
    { name: '初级包', packages: chujipackage.value },
    { name: '中级包', packages: zhongjipackage.value },
    { name: '高级包', packages: gaojipackage.value }, 
    { name: '特定级包', packages: tedingpackage.value }
  ]
}

getList();

</script>
<style scoped>
.service-package-management {
  padding: 20px;
}
.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.filter-bar >.el-select {
  width: 150px;
  margin-right: 10px;
}
.filter-bar >.el-input {
  width: 300px;
  margin-right: 10px;
}
.package-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.package-category {
  width: 100%;
}
.package-item {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 15px;
  width: calc(33.33% - 20px);
  box-sizing: border-box;
}
.package-icon {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  vertical-align: middle;
}
.package-info {
  display: inline-block;
  vertical-align: middle;
}
.service-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.service-tag {
  padding: 3px 8px;
  border-radius: 4px;
  background-color: #f4f4f5;
  color: #606266;
  font-size: 12px;
}
.status-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.pending {
  background-color: #f9e8c4;
  color: #f5a623;
}
.inUse {
  background-color: #c2e7f8;
  color: #0088ff;
}
</style>